<template>
  <div class="page-container">
    <div class="page-header">
      <h1 class="page-title">数据概览</h1>
    </div>
    
    <!-- 统计卡片 -->
    <n-grid :cols="4" :x-gap="16" style="margin-bottom: 24px;">
      <n-grid-item>
        <n-card>
          <n-statistic label="今日销售额" :value="todayStats.totalSales">
            <template #prefix>
              <n-icon size="24" color="#18a058">
                <CashOutline />
              </n-icon>
            </template>
            <template #suffix>元</template>
          </n-statistic>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card>
          <n-statistic label="今日订单数" :value="todayStats.orderCount">
            <template #prefix>
              <n-icon size="24" color="#2080f0">
                <ReceiptOutline />
              </n-icon>
            </template>
            <template #suffix>单</template>
          </n-statistic>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card>
          <n-statistic label="本月销售额" :value="monthStats.totalSales">
            <template #prefix>
              <n-icon size="24" color="#f0a020">
                <TrendingUpOutline />
              </n-icon>
            </template>
            <template #suffix>元</template>
          </n-statistic>
        </n-card>
      </n-grid-item>
      
      <n-grid-item>
        <n-card>
          <n-statistic label="本月订单数" :value="monthStats.orderCount">
            <template #prefix>
              <n-icon size="24" color="#d03050">
                <StatsChartOutline />
              </n-icon>
            </template>
            <template #suffix>单</template>
          </n-statistic>
        </n-card>
      </n-grid-item>
    </n-grid>
    
    <!-- 热销商品排行 -->
    <n-card title="热销商品排行（本月）" style="margin-bottom: 24px;">
      <n-table :single-line="false">
        <thead>
          <tr>
            <th>排名</th>
            <th>商品名称</th>
            <th>销售数量</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in topBreadList" :key="index">
            <td>
              <n-tag v-if="index === 0" type="error">{{ index + 1 }}</n-tag>
              <n-tag v-else-if="index === 1" type="warning">{{ index + 1 }}</n-tag>
              <n-tag v-else-if="index === 2" type="info">{{ index + 1 }}</n-tag>
              <span v-else>{{ index + 1 }}</span>
            </td>
            <td>{{ item.breadName }}</td>
            <td>{{ item.salesCount }}</td>
          </tr>
        </tbody>
      </n-table>
    </n-card>
    
    <!-- 快捷操作 -->
    <n-card title="快捷操作">
      <n-space>
        <n-button type="primary" @click="$router.push('/sales/create')">
          <template #icon>
            <n-icon><AddCircleOutline /></n-icon>
          </template>
          销售登记
        </n-button>
        <n-button @click="$router.push('/bread')">
          <template #icon>
            <n-icon><FastFoodOutline /></n-icon>
          </template>
          面包管理
        </n-button>
        <n-button @click="$router.push('/stock')">
          <template #icon>
            <n-icon><ArchiveOutline /></n-icon>
          </template>
          库存管理
        </n-button>
      </n-space>
    </n-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSalesStatistics } from '@/api/sales'
import { 
  NCard, NGrid, NGridItem, NStatistic, NIcon, NTable, NTag, NSpace, NButton, useMessage 
} from 'naive-ui'
import { 
  CashOutline, ReceiptOutline, TrendingUpOutline, StatsChartOutline,
  AddCircleOutline, FastFoodOutline, ArchiveOutline
} from '@vicons/ionicons5'

const message = useMessage()

const todayStats = ref({
  totalSales: 0,
  orderCount: 0
})

const monthStats = ref({
  totalSales: 0,
  orderCount: 0
})

const topBreadList = ref([])

async function loadStatistics() {
  try {
    // 获取今日数据
    const today = new Date()
    today.setHours(0, 0, 0, 0)
    const todayRes = await getSalesStatistics({
      startTime: today.toISOString().slice(0, 19).replace('T', ' ')
    })
    todayStats.value = todayRes.data
    
    // 获取本月数据
    const monthStart = new Date(today.getFullYear(), today.getMonth(), 1)
    const monthRes = await getSalesStatistics({
      startTime: monthStart.toISOString().slice(0, 19).replace('T', ' ')
    })
    monthStats.value = monthRes.data
    topBreadList.value = monthRes.data.topBreadList || []
  } catch (error) {
    message.error(error.message || '加载统计数据失败')
  }
}

onMounted(() => {
  loadStatistics()
})
</script>

